<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
  <meta name="theme-color" content="#222">
  <meta name="generator" content="Hexo 5.4.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

  <link rel="stylesheet" href="/css/main.css">



  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.2/css/all.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css">

  <script class="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {
      "hostname": "holidaypenguin.gitee.io",
      "root": "/",
      "images": "/images",
      "scheme": "Mist",
      "version": "8.2.2",
      "exturl": false,
      "sidebar": {
        "position": "right",
        "display": "always",
        "padding": 18,
        "offset": 12
      },
      "copycode": true,
      "bookmark": {
        "enable": false,
        "color": "#222",
        "save": "auto"
      },
      "fancybox": false,
      "mediumzoom": false,
      "lazyload": false,
      "pangu": false,
      "comments": {
        "style": "tabs",
        "active": null,
        "storage": true,
        "lazyload": false,
        "nav": null
      },
      "motion": {
        "enable": true,
        "async": true,
        "transition": {
          "post_block": "fadeIn",
          "post_header": "fadeInDown",
          "post_body": "fadeInDown",
          "coll_header": "fadeInLeft",
          "sidebar": "slideUpIn"
        }
      },
      "prism": false,
      "i18n": {
        "placeholder": "搜索...",
        "empty": "没有找到任何搜索结果：${query}",
        "hits_time": "找到 ${hits} 个搜索结果（用时 ${time} 毫秒）",
        "hits": "找到 ${hits} 个搜索结果"
      },
      "path": "/search.xml",
      "localsearch": {
        "enable": true,
        "trigger": "auto",
        "top_n_per_article": 1,
        "unescape": false,
        "preload": false
      }
    };
  </script>
  <meta property="og:type" content="article">
  <meta property="og:title" content="commit规范+commitlint+CHANGELOG自动生成一条龙服务">
  <meta property="og:url" content="https://holidaypenguin.gitee.io/blob/2021-03-01-commit-specification-+-commit-lint-+-changelog-automatically-generate-one-stop-service/index.html">
  <meta property="og:site_name" content="HolidayPenguin">
  <meta property="og:locale" content="zh_CN">
  <meta property="og:image" content="https://visitor-badge.glitch.me/badge?page_id=holidaypenguin.gitee.io/">
  <meta property="og:image" content="https://holidaypenguin.gitee.io/images/git/622afd66f77e4fff9d251642374ad225~tplv-k3u1fbpfcp-watermark.image">
  <meta property="og:image" content="https://holidaypenguin.gitee.io/images/git/d2bdc22756824da18e5c5f18972bc6a5~tplv-k3u1fbpfcp-watermark.image">
  <meta property="og:image" content="https://holidaypenguin.gitee.io/images/git/86b96d6c62684f248b191f2f3b840409~tplv-k3u1fbpfcp-watermark.image">
  <meta property="og:image" content="https://holidaypenguin.gitee.io/images/git/521233e6a374425abd69304c18791268~tplv-k3u1fbpfcp-watermark.image">
  <meta property="og:image" content="https://holidaypenguin.gitee.io/images/git/e8246b6cd8a04de491b5469181c93c43~tplv-k3u1fbpfcp-watermark.image">
  <meta property="og:image" content="https://holidaypenguin.gitee.io/images/git/37c90f8fffd441bca2271e8e7bbfcd56~tplv-k3u1fbpfcp-watermark.image">
  <meta property="og:image" content="https://holidaypenguin.gitee.io/images/git/b25fe63d36074cd3a370df7655e31e19~tplv-k3u1fbpfcp-watermark.image">
  <meta property="og:image" content="https://holidaypenguin.gitee.io/images/git/cf4cd1cd4e694d89b5e5dedb46b65067~tplv-k3u1fbpfcp-watermark.image">
  <meta property="og:image" content="https://holidaypenguin.gitee.io/images/git/5af833aee4114cb08e226dccd50e4739~tplv-k3u1fbpfcp-watermark.image">
  <meta property="og:image" content="https://holidaypenguin.gitee.io/images/git/c28b1ed9b7374cd0825ba9f5aca7abde~tplv-k3u1fbpfcp-watermark.image">
  <meta property="og:image" content="https://holidaypenguin.gitee.io/images/git/4816105eac7d48418e79a9c8f8e8ff8d~tplv-k3u1fbpfcp-watermark.image">
  <meta property="og:image" content="https://holidaypenguin.gitee.io/images/git/94319f9e283f46e39e578f8af9b6c938~tplv-k3u1fbpfcp-watermark.image">
  <meta property="og:image" content="https://holidaypenguin.gitee.io/images/git/433c6c7bc4b8481286a8ee5922070db1~tplv-k3u1fbpfcp-watermark.image">
  <meta property="og:image" content="https://holidaypenguin.gitee.io/images/git/3028fbd2527742acaefa950b14790f33~tplv-k3u1fbpfcp-watermark.image">
  <meta property="og:image" content="https://holidaypenguin.gitee.io/images/git/a7642cf16568405a8b4bdf0677a24fd0~tplv-k3u1fbpfcp-watermark.image">
  <meta property="og:image" content="https://holidaypenguin.gitee.io/images/git/f7c66497e1244d18a12ae72d6e6e7adf~tplv-k3u1fbpfcp-watermark.image">
  <meta property="og:image" content="https://holidaypenguin.gitee.io/images/git/6bec5f37f39c458ea358093c1e3c7bcf~tplv-k3u1fbpfcp-watermark.image">
  <meta property="article:published_time" content="2021-03-01T06:11:04.000Z">
  <meta property="article:modified_time" content="2021-03-01T06:11:04.000Z">
  <meta property="article:author" content="holidaypenguin">
  <meta property="article:tag" content="Git">
  <meta property="article:tag" content="commit规范">
  <meta property="article:tag" content="Angular">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:image" content="https://visitor-badge.glitch.me/badge?page_id=holidaypenguin.gitee.io/">


  <link rel="canonical" href="https://holidaypenguin.gitee.io/blob/2021-03-01-commit-specification-+-commit-lint-+-changelog-automatically-generate-one-stop-service/">


  <script class="page-configurations">
    // https://hexo.io/docs/variables.html
    CONFIG.page = {
      sidebar: "",
      isHome: false,
      isPost: true,
      lang: 'zh-CN'
    };
  </script>
  <title>commit规范+commitlint+CHANGELOG自动生成一条龙服务 | HolidayPenguin</title>





  <noscript>
    <style>
      body {
        margin-top: 2rem;
      }

      .use-motion .menu-item,
      .use-motion .sidebar,
      .use-motion .post-block,
      .use-motion .pagination,
      .use-motion .comments,
      .use-motion .post-header,
      .use-motion .post-body,
      .use-motion .collection-header {
        visibility: visible;
      }

      .use-motion .header,
      .use-motion .site-brand-container .toggle,
      .use-motion .footer {
        opacity: initial;
      }

      .use-motion .site-title,
      .use-motion .site-subtitle,
      .use-motion .custom-logo-image {
        opacity: initial;
        top: initial;
      }

      .use-motion .logo-line {
        transform: scaleX(1);
      }

      .search-pop-overlay,
      .sidebar-nav {
        display: none;
      }

      .sidebar-panel {
        display: block;
      }
    </style>
  </noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner">
        <div class="site-brand-container">
          <div class="site-nav-toggle">
            <div class="toggle" aria-label="切换导航栏" role="button">
              <span class="toggle-line"></span>
              <span class="toggle-line"></span>
              <span class="toggle-line"></span>
            </div>
          </div>

          <div class="site-meta">

            <a href="/" class="brand" rel="start">
              <i class="logo-line"></i>
              <h1 class="site-title">HolidayPenguin</h1>
              <i class="logo-line"></i>
            </a>
          </div>

          <div class="site-nav-right">
            <div class="toggle popup-trigger">
              <i class="fa fa-search fa-fw fa-lg"></i>
            </div>
          </div>
        </div>



        <nav class="site-nav">
          <ul class="main-menu menu">
            <li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li>
            <li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li>
            <li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li>
            <li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li>
            <li class="menu-item menu-item-search">
              <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
              </a>
            </li>
          </ul>
        </nav>



        <div class="search-pop-overlay">
          <div class="popup search-popup">
            <div class="search-header">
              <span class="search-icon">
                <i class="fa fa-search"></i>
              </span>
              <div class="search-input-container">
                <input autocomplete="off" autocapitalize="off" maxlength="80" placeholder="搜索..." spellcheck="false" type="search" class="search-input">
              </div>
              <span class="popup-btn-close" role="button">
                <i class="fa fa-times-circle"></i>
              </span>
            </div>
            <div class="search-result-container no-result">
              <div class="search-result-icon">
                <i class="fa fa-spinner fa-pulse fa-5x"></i>
              </div>
            </div>

          </div>
        </div>

      </div>


      <div class="toggle sidebar-toggle" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
      </div>

      <aside class="sidebar">

        <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
          <ul class="sidebar-nav">
            <li class="sidebar-nav-toc">
              文章目录
            </li>
            <li class="sidebar-nav-overview">
              站点概览
            </li>
          </ul>

          <div class="sidebar-panel-container">
            <!--noindex-->
            <div class="post-toc-wrap sidebar-panel">
              <div class="post-toc animated">
                <ol class="nav">
                  <li class="nav-item nav-level-1"><a class="nav-link" href="#commit%E8%A7%84%E8%8C%83-commitlint-CHANGELOG%E8%87%AA%E5%8A%A8%E7%94%9F%E6%88%90%E4%B8%80%E6%9D%A1%E9%BE%99%E6%9C%8D%E5%8A%A1"><span class="nav-number">1.</span> <span class="nav-text">commit规范+commitlint+CHANGELOG自动生成一条龙服务</span></a></li>
                  <li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E8%A8%80"><span class="nav-number">2.</span> <span class="nav-text">前言</span></a></li>
                  <li class="nav-item nav-level-1"><a class="nav-link" href="#Commit-%E8%A7%84%E8%8C%83%E8%AF%B4%E6%98%8E"><span class="nav-number">3.</span> <span class="nav-text">Commit 规范说明</span></a>
                    <ol class="nav-child">
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#Angluar-commit-message-%E8%A7%84%E8%8C%83"><span class="nav-number">3.1.</span> <span class="nav-text">Angluar commit message 规范</span></a>
                        <ol class="nav-child">
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#Header%E9%83%A8%E5%88%86"><span class="nav-number">3.1.1.</span> <span class="nav-text">Header部分</span></a></li>
                          <li class="nav-item nav-level-3"><a class="nav-link" href="#Footer%E9%83%A8%E5%88%86-%E9%80%89%E5%A1%AB-%E5%8F%AF%E4%BB%A5%E5%8C%85%E5%90%AB%E4%BB%A5%E4%B8%8B%E4%B8%A4%E7%A7%8D%E6%83%85%E5%86%B5"><span class="nav-number">3.1.2.</span> <span class="nav-text">Footer部分 选填 可以包含以下两种情况</span></a></li>
                        </ol>
                      </li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89-commit-message-%E8%A7%84%E8%8C%83"><span class="nav-number">3.2.</span> <span class="nav-text">自定义 commit message 规范</span></a></li>
                    </ol>
                  </li>
                  <li class="nav-item nav-level-1"><a class="nav-link" href="#Commit-%E8%A7%84%E8%8C%83%E5%B7%A5%E5%85%B7"><span class="nav-number">4.</span> <span class="nav-text">Commit 规范工具</span></a>
                    <ol class="nav-child">
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#Angluar-%E8%A7%84%E8%8C%83%E7%89%88"><span class="nav-number">4.1.</span> <span class="nav-text">Angluar 规范版</span></a></li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%A1%A8%E6%83%85%E5%9C%A8subject%E9%83%A8%E5%88%86%E5%BC%80%E5%A4%B4%E7%9A%84%E6%98%BE%E7%A4%BA"><span class="nav-number">4.2.</span> <span class="nav-text">表情在subject部分开头的显示</span></a></li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%A1%A8%E6%83%85%E5%9C%A8%E6%8F%90%E4%BA%A4%E4%BF%A1%E6%81%AF%E6%9C%80%E5%BC%80%E5%A4%B4%E6%98%BE%E7%A4%BA"><span class="nav-number">4.3.</span> <span class="nav-text">表情在提交信息最开头显示</span></a></li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#vscode%E6%8F%90%E4%BA%A4%E4%BB%A3%E7%A0%81%E5%B7%A5%E5%85%B7"><span class="nav-number">4.4.</span> <span class="nav-text">vscode提交代码工具</span></a></li>
                    </ol>
                  </li>
                  <li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%A7%84%E8%8C%83%E6%A0%A1%E9%AA%8C"><span class="nav-number">5.</span> <span class="nav-text">规范校验</span></a>
                    <ol class="nav-child">
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#Commit-message-%E6%A0%A1%E9%AA%8C"><span class="nav-number">5.1.</span> <span class="nav-text">Commit message 校验</span></a></li>
                      <li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83%E6%A0%A1%E9%AA%8C-amp-%E8%B7%91%E6%B5%8B%E8%AF%95"><span class="nav-number">5.2.</span> <span class="nav-text">代码规范校验 &amp; 跑测试</span></a></li>
                    </ol>
                  </li>
                  <li class="nav-item nav-level-1"><a class="nav-link" href="#CHANGELOG-%E8%87%AA%E5%8A%A8%E7%94%9F%E6%88%90"><span class="nav-number">6.</span> <span class="nav-text">CHANGELOG 自动生成</span></a></li>
                  <li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="nav-number">7.</span> <span class="nav-text">参考文献</span></a></li>
                </ol>
              </div>
            </div>
            <!--/noindex-->

            <div class="site-overview-wrap sidebar-panel">
              <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
                <p class="site-author-name" itemprop="name">holidaypenguin</p>
                <div class="site-description" itemprop="description"></div>
              </div>
              <div class="site-state-wrap site-overview-item animated">
                <nav class="site-state">
                  <div class="site-state-item site-state-posts">
                    <a href="/archives/">

                      <span class="site-state-item-count">138</span>
                      <span class="site-state-item-name">日志</span>
                    </a>
                  </div>
                  <div class="site-state-item site-state-categories">
                    <a href="/categories/">

                      <span class="site-state-item-count">26</span>
                      <span class="site-state-item-name">分类</span></a>
                  </div>
                  <div class="site-state-item site-state-tags">
                    <a href="/tags/">

                      <span class="site-state-item-count">234</span>
                      <span class="site-state-item-name">标签</span></a>
                  </div>
                </nav>
              </div>
              <div class="links-of-author site-overview-item animated">
                <span class="links-of-author-item">
                  <a href="https://github.com/holidaypenguin" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;holidaypenguin" rel="noopener" target="_blank"><i class="github fa-fw"></i>GitHub</a>
                </span>
                <span class="links-of-author-item">
                  <a href="mailto:songshipeng2016@gmail.com" title="E-Mail → mailto:songshipeng2016@gmail.com" rel="noopener" target="_blank"><i class="envelope fa-fw"></i>E-Mail</a>
                </span>
              </div>



            </div>
          </div>
        </div>
      </aside>
      <div class="sidebar-dimmer"></div>


    </header>


    <div class="back-to-top" role="button">
      <i class="fa fa-arrow-up"></i>
      <span>0%</span>
    </div>

    <noscript>
      <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
    </noscript>


    <div class="main-inner post posts-expand">





      <div class="post-block">



        <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
          <link itemprop="mainEntityOfPage" href="https://holidaypenguin.gitee.io/blob/2021-03-01-commit-specification-+-commit-lint-+-changelog-automatically-generate-one-stop-service/">

          <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
            <meta itemprop="image" content="/images/avatar.gif">
            <meta itemprop="name" content="holidaypenguin">
            <meta itemprop="description" content="">
          </span>

          <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
            <meta itemprop="name" content="HolidayPenguin">
          </span>
          <header class="post-header">
            <h1 class="post-title" itemprop="name headline">
              commit规范+commitlint+CHANGELOG自动生成一条龙服务
            </h1>

            <div class="post-meta-container">
              <div class="post-meta">
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-calendar"></i>
                  </span>
                  <span class="post-meta-item-text">发表于</span>

                  <time title="创建时间：2021-03-01 14:11:04" itemprop="dateCreated datePublished" datetime="2021-03-01T14:11:04+08:00">2021-03-01</time>
                </span>
                <span class="post-meta-item">
                  <span class="post-meta-item-icon">
                    <i class="far fa-folder"></i>
                  </span>
                  <span class="post-meta-item-text">分类于</span>
                  <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                    <a href="/categories/Git/" itemprop="url" rel="index"><span itemprop="name">Git</span></a>
                  </span>
                </span>


                <span id="/blob/2021-03-01-commit-specification-+-commit-lint-+-changelog-automatically-generate-one-stop-service/" class="post-meta-item leancloud_visitors" data-flag-title="commit规范+commitlint+CHANGELOG自动生成一条龙服务" title="阅读次数">
                  <span class="post-meta-item-icon">
                    <i class="far fa-eye"></i>
                  </span>
                  <span class="post-meta-item-text">阅读次数：</span>
                  <span class="leancloud-visitors-count"></span>
                </span>
              </div>

              <div class="post-description">
                <!-- more -->
              </div>
            </div>
          </header>




          <div class="post-body" itemprop="articleBody">
            <p><a target="_blank" rel="noopener" href="https://github.com/jwenjian/visitor-count-badge"><img src="" data-original="https://visitor-badge.glitch.me/badge?page_id=holidaypenguin.gitee.io/" alt="总访客数量"></a></p>
            <h1 id="commit规范-commitlint-CHANGELOG自动生成一条龙服务"><a href="#commit规范-commitlint-CHANGELOG自动生成一条龙服务" class="headerlink" title="commit规范+commitlint+CHANGELOG自动生成一条龙服务"></a>commit规范+commitlint+CHANGELOG自动生成一条龙服务</h1>
            <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1>
            <p>最近心血来潮打算用vue3+ts写一个背诗的h5（为满足自己的背诗习惯）。工欲善其事，必先利其器。先搭个架子啦！虽然是自己一个人写的项目，但是该有的开发规范也是要有的哦！在弄commit规范和自动生成changlog的时候，因为我想要提交表情开头的commit格式而踩尽无数坑！！！故写此文纪念~ 哦！不~ 是归纳总结分享给身边所有想踩坑的人们儿~ 好啦！废话不多说，正式开始我的表演~😝</p>
            <h1 id="Commit-规范说明"><a href="#Commit-规范说明" class="headerlink" title="Commit 规范说明"></a>Commit 规范说明</h1>
            <p>首先，规范的commit信息能让人一眼清晰明的知道该提交属于什么类型、修改范围、具体改动，提高团队协作。也方便我们日后找bug，提高团队协作。</p>
            <p>下面让我们先来了解下目前大家使用较多的<a target="_blank" rel="noopener" href="https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines">Angular团队规范</a>。</p>
            <h2 id="Angluar-commit-message-规范"><a href="#Angluar-commit-message-规范" class="headerlink" title="Angluar commit message 规范"></a>Angluar commit message 规范</h2>
            <p>该规范将commit信息分为header、body、footer三个部分。</p>
            <p>这三部分中哪一行都不能超过100个字符！(angular规范文档中写的)</p>
            <p>这里说明下为什么要限制字符长度，因为git会将commit的主题部分超过72个字符的截断显示。效果如下图所示例：</p>
            <p><img src="" data-original="/images/git/622afd66f77e4fff9d251642374ad225~tplv-k3u1fbpfcp-watermark.image" alt="img"></p>
            <p>Angluar commit message格式如下：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">&lt;type&gt;(&lt;scope&gt;): &lt;subject&gt; &#x2F;&#x2F; 这一行是Header</span><br><span class="line">&lt;BLANK LINE&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;BLANK LINE&gt;</span><br><span class="line">&lt;footer&gt;</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>Body部分比较简单， 为选填项， 指本次提交的具体描述。</p>
            <h3 id="Header部分"><a href="#Header部分" class="headerlink" title="Header部分"></a>Header部分</h3>
            <p>该规范将 header 分为 type、scope、subject 三部分。</p>
            <blockquote>
              <p>type</p>
            </blockquote>
            <p>type指本次提交的类型，为必填项，必须为以下之一：</p>
            <ul>
              <li>feat: 一项新功能</li>
              <li>fix: 一个错误修复</li>
              <li>docs: 仅文档更改</li>
              <li>style: 不影响代码含义的更改（空白，格式，缺少分号等）</li>
              <li>refactor: 既不修正错误也不增加功能的代码更改（重构）</li>
              <li>perf: 改进性能的代码更改</li>
              <li>test: 添加缺失或更正现有测试</li>
              <li>chore: 更改构建过程或辅助工具和库，例如文档生成</li>
            </ul>
            <blockquote>
              <p>scope</p>
            </blockquote>
            <p>scope指本次提交的影响范围，为可选项，可以是指定提交更改位置的任何内容。我一般都写更改部分的模块名或者文件名。</p>
            <p>当更改影响的范围不止一个范围时，可以使用星号(*)。当然也可以不填写。</p>
            <blockquote>
              <p>subject</p>
            </blockquote>
            <p>subject指本次提交的简要描述，它有如下两个规则。</p>
            <ul>
              <li>不要大写第一个字母</li>
              <li>末尾没有点（.）</li>
            </ul>
            <h3 id="Footer部分-选填-可以包含以下两种情况"><a href="#Footer部分-选填-可以包含以下两种情况" class="headerlink" title="Footer部分 选填 可以包含以下两种情况"></a>Footer部分 选填 可以包含以下两种情况</h3>
            <ul>
              <li>是否产生了破坏性修改</li>
            </ul>
            <p>如果当前代码与上一个版本不兼容，如版本升级、接口参数减少、接口删除、迁移等就是破坏性修改。</p>
            <p>如果是破坏性修改则 Footer 部分会以BREAKING CHANGE开头，后面是对变动的描述、以及变动理由和迁移方法。如下：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">BREAKING CHANGE: 变动的描述\理由\迁移方法</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <ul>
              <li>关闭 Issue</li>
            </ul>
            <p>如果当前 commit 针对某个 issue，那么可以在 Footer 部分关闭这个 issue，也可以关闭多个 issue。填写格式如下：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">Close #ISSUE_ID</span><br><span class="line">Closes #ISSUE_ID, #ISSUE_ID</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>如果你使用jira，也可以填写本次修改所影响的JIRA_ID，但是要开启该功能需要先集成 <a target="_blank" rel="noopener" href="https://docs.gitlab.com/ee/user/project/integrations/jira.html">jira与gitlab集成</a> &amp; <a target="_blank" rel="noopener" href="https://support.atlassian.com/jira-cloud-administration/docs/integrate-with-github/">jira与github集成</a>。填写格式如下：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">re #JIRA_ID &#x2F;&#x2F; re是关于的意思</span><br><span class="line">fix #JIRA_ID</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>按照以上的格式提交到git上显示如下：</p>
            <p><img src="" data-original="/images/git/d2bdc22756824da18e5c5f18972bc6a5~tplv-k3u1fbpfcp-watermark.image" alt="img"></p>
            <p>以上是Angular团队的commit规范，大家也可以根据自己团队的习惯去自定义commit规范。</p>
            <h2 id="自定义-commit-message-规范"><a href="#自定义-commit-message-规范" class="headerlink" title="自定义 commit message 规范"></a>自定义 commit message 规范</h2>
            <p>这部分我就给大家介绍下，我在这次项目里想要自定义的提交格式，大家可以举一反三。</p>
            <p>我想自定义的规范是基于Angluar规范的，只是在它的基础上加个表情gitmoji字段在最打头的位置。格式如下：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">:gitmoji: &lt;type&gt;(&lt;scope&gt;): &lt;subject&gt; &#x2F;&#x2F; 这一行是Header</span><br><span class="line">&lt;BLANK LINE&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;BLANK LINE&gt;</span><br><span class="line">&lt;footer&gt;</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>其中gitmoji项是必填的，值只能为<a target="_blank" rel="noopener" href="https://gitmoji.dev/">gitmoji提供的</a>表情列表中的表情。</p>
            <p>按照我想要的格式提交到git上显示如下：</p>
            <p><img src="" data-original="/images/git/86b96d6c62684f248b191f2f3b840409~tplv-k3u1fbpfcp-watermark.image" alt="img"></p>
            <p>这里先说一下，Angluar规范里也有写表情的，要借助 git-cz， 它是在subject打头显示的表情，跟我想要的效果不符合😀，是长这个样子滴！</p>
            <p><img src="" data-original="/images/git/521233e6a374425abd69304c18791268~tplv-k3u1fbpfcp-watermark.image" alt="img"></p>
            <p>到这里，commit规范格式也讲的差不多啦！这么多乱七八糟的规矩，当然不能让大家手写的啦！🎉🎉🎉🎉当当当当~ 让我们用工具来玩吧！</p>
            <h1 id="Commit-规范工具"><a href="#Commit-规范工具" class="headerlink" title="Commit 规范工具"></a>Commit 规范工具</h1>
            <p>这里，我们先聊怎么用工具实现 Angluar 默认规范的那种，后面再讲自定义的。 不管是 Angluar 版还是自定义版我们都会需要到下面这个工具：</p>
            <p><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/commitizen">commitizen</a>：它会提供 git cz 命令替代我们的 git commit命令，帮助我们更加方便生成符合规范的 commit message。</p>
            <h2 id="Angluar-规范版"><a href="#Angluar-规范版" class="headerlink" title="Angluar 规范版"></a>Angluar 规范版</h2>
            <blockquote>
              <p>全局安装</p>
            </blockquote>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">npm install -g commitizen</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>初始化 commitizen 预设，这里使用官网首选的预设 cz-conventional-changelog</p>
            <p><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/cz-conventional-changelog">cz-conventional-changelog</a>: 它是 commitizen 的首选适配器，默认有配置，但也可以自定义types，设置header长度之类的属性等。但是它的提示信息都是英文的，不能自定义配置（源码内发现的）。如果需要自定义配置提示信息需要使用 <a target="_blank" rel="noopener" href="https://github.com/leoforfree/cz-customizable">cz-customizable</a> 适配器，文章后面自定义版有这部分内容，<a target="_blank" rel="noopener" href="https://juejin.cn/post/6934292467160514567?utm_source=gold_browser_extension#heading-9">点击这里传送</a>。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">commitizen init cz-conventional-changelog --save-dev --save-exact</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>全局模式下, 需要 ~/.czrc 配置文件, 为 commitizen 指定 Adapter</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">echo &#39;&#123; &quot;path&quot;: &quot;cz-conventional-changelog&quot; &#125;&#39; &gt; ~&#x2F;.czrc</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>现在大家现在就可以使用 git cz 或 cz 命令来提交commit信息了。</p>
            <p>全局安装的可以在任何git init下的目录执行 git cz 或 cz 命令代替 git commit 。</p>
            <blockquote>
              <p>项目内安装</p>
            </blockquote>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">npm install commitizen cz-conventional-changelog -D</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>在package.json中配置，这里是将 cz-conventional-changelog 设置为 commitizen 的 Adapter 。大家也可以选择其他的 Adapter ，文章内自定义版有设置其他 Adapter 的 <a target="_blank" rel="noopener" href="https://juejin.cn/post/6934292467160514567?utm_source=gold_browser_extension#heading-9">点击此处查看</a> 。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">&quot;scripts&quot;: &#123;</span><br><span class="line">  &quot;commit&quot;: &quot;cz&quot;</span><br><span class="line">&#125;</span><br><span class="line">&quot;config&quot;: &#123;</span><br><span class="line">  &quot;commitizen&quot;: &#123;</span><br><span class="line">    &quot;path&quot;: &quot;cz-conventional-changelog&quot;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>项目内安装，只能在当前项目目录下 npm run commit 代替 git commit。</p>
            <p>我为了方便用cz命令，都是全局和项目内都安装，下面演示一下效果：<img src="" data-original="/images/git/e8246b6cd8a04de491b5469181c93c43~tplv-k3u1fbpfcp-watermark.image" alt="img"></p>
            <p>到这里，就已经实现commit提交自动化了。不过cz-conventional-changelog并没有支持表情，下面我们讲一下怎么加入表情。</p>
            <h2 id="表情在subject部分开头的显示"><a href="#表情在subject部分开头的显示" class="headerlink" title="表情在subject部分开头的显示"></a>表情在subject部分开头的显示</h2>
            <p>表情在subject部分开头，也可以没有表情，提交效果如下：</p>
            <p><img src="" data-original="/images/git/37c90f8fffd441bca2271e8e7bbfcd56~tplv-k3u1fbpfcp-watermark.image" alt="img"></p>
            <p>实现这种效果，需要用到 <a target="_blank" rel="noopener" href="https://github.com/streamich/git-cz">streamich/git-cz</a></p>
            <p>1、全局安装</p>
            <p>可以不用下载 commitizen ，就可以运行git-cz命令提交commit，如果已经安装了 commitizen 会覆盖 commitizen 的 git cz命令的效果。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">npm install -g git-cz</span><br><span class="line"></span><br><span class="line">git-cz</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>2、搭配 commitizen 项目内使用</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">npm install -D git-cz</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>package.json 中 commitizen 的适配器为 git-cz:</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">&#123;</span><br><span class="line">  &quot;config&quot;: &#123;</span><br><span class="line">    &quot;commitizen&quot;: &#123;</span><br><span class="line">      &quot;path&quot;: &quot;git-cz&quot;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>运行以下命令</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">npx git-cz</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>效果如下，提交的commit在subject开头有表情：<img src="" data-original="/images/git/b25fe63d36074cd3a370df7655e31e19~tplv-k3u1fbpfcp-watermark.image" alt="img"></p>
            <p>😭我的电脑表情显示乱码，还没有解决（有知道怎么解决的朋友麻烦评价区告诉我，我实在是搞不出来了😰），不过只是电脑上乱码显示，到github上看是正常显示的，所以也并不会很妨碍我提交，只是看着心里不得劲。</p>
            <p>这里还有个小问题，在我实际操作中，发现只要 install 了 git-cz 就可以运行 npx git-cz 命令，显示的选择文本等也是符合git-cz默认设置的，不需要 package.json 设置配置器，不知道为什么跟官网描述不一致，还没弄清楚😥。</p>
            <p>git-cz 工具它也是提供自定义配置的，但是配置项有限。在根目录添加 changelog.config.js ，下面为大家示例一个官方配置，大家可以在<a target="_blank" rel="noopener" href="https://github.com/streamich/git-cz">streamich/git-cz官方</a>看更多配置。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">.&#x2F;changelog.config.js</span><br><span class="line"></span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">  &quot;disableEmoji&quot;: false,</span><br><span class="line">  &quot;list&quot;: [</span><br><span class="line">    &quot;test&quot;,</span><br><span class="line">    &quot;feat&quot;,</span><br><span class="line">    &quot;fix&quot;,</span><br><span class="line">    &quot;chore&quot;,</span><br><span class="line">    &quot;docs&quot;,</span><br><span class="line">    &quot;refactor&quot;,</span><br><span class="line">    &quot;style&quot;,</span><br><span class="line">    &quot;ci&quot;,</span><br><span class="line">    &quot;perf&quot;</span><br><span class="line">  ],</span><br><span class="line">  &quot;maxMessageLength&quot;: 64,</span><br><span class="line">  &quot;minMessageLength&quot;: 3,</span><br><span class="line">  &quot;questions&quot;: [</span><br><span class="line">    &quot;type&quot;,</span><br><span class="line">    &quot;scope&quot;,</span><br><span class="line">    &quot;subject&quot;,</span><br><span class="line">    &quot;body&quot;,</span><br><span class="line">    &quot;breaking&quot;,</span><br><span class="line">    &quot;issues&quot;,</span><br><span class="line">    &quot;lerna&quot;</span><br><span class="line">  ],</span><br><span class="line">  &quot;scopes&quot;: [],</span><br><span class="line">  &quot;types&quot;: &#123;</span><br><span class="line">    &quot;chore&quot;: &#123;</span><br><span class="line">      &quot;description&quot;: &quot;Build process or auxiliary tool changes&quot;,</span><br><span class="line">      &quot;emoji&quot;: &quot;🤖&quot;, &#x2F;&#x2F; 当前类型的commit所显示的表情</span><br><span class="line">      &quot;value&quot;: &quot;chore&quot;</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;ci&quot;: &#123;</span><br><span class="line">      &quot;description&quot;: &quot;CI related changes&quot;,</span><br><span class="line">      &quot;emoji&quot;: &quot;🎡&quot;,</span><br><span class="line">      &quot;value&quot;: &quot;ci&quot;</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;docs&quot;: &#123;</span><br><span class="line">      &quot;description&quot;: &quot;Documentation only changes&quot;,</span><br><span class="line">      &quot;emoji&quot;: &quot;✏️&quot;,</span><br><span class="line">      &quot;value&quot;: &quot;docs&quot;</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;feat&quot;: &#123;</span><br><span class="line">      &quot;description&quot;: &quot;A new feature&quot;,</span><br><span class="line">      &quot;emoji&quot;: &quot;🎸&quot;,</span><br><span class="line">      &quot;value&quot;: &quot;feat&quot;</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;fix&quot;: &#123;</span><br><span class="line">      &quot;description&quot;: &quot;A bug fix&quot;,</span><br><span class="line">      &quot;emoji&quot;: &quot;🐛&quot;,</span><br><span class="line">      &quot;value&quot;: &quot;fix&quot;</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;perf&quot;: &#123;</span><br><span class="line">      &quot;description&quot;: &quot;A code change that improves performance&quot;,</span><br><span class="line">      &quot;emoji&quot;: &quot;⚡️&quot;,</span><br><span class="line">      &quot;value&quot;: &quot;perf&quot;</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;refactor&quot;: &#123;</span><br><span class="line">      &quot;description&quot;: &quot;A code change that neither fixes a bug or adds a feature&quot;,</span><br><span class="line">      &quot;emoji&quot;: &quot;💡&quot;,</span><br><span class="line">      &quot;value&quot;: &quot;refactor&quot;</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;release&quot;: &#123;</span><br><span class="line">      &quot;description&quot;: &quot;Create a release commit&quot;,</span><br><span class="line">      &quot;emoji&quot;: &quot;🏹&quot;,</span><br><span class="line">      &quot;value&quot;: &quot;release&quot;</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;style&quot;: &#123;</span><br><span class="line">      &quot;description&quot;: &quot;Markup, white-space, formatting, missing semi-colons...&quot;,</span><br><span class="line">      &quot;emoji&quot;: &quot;💄&quot;,</span><br><span class="line">      &quot;value&quot;: &quot;style&quot;</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;test&quot;: &#123;</span><br><span class="line">      &quot;description&quot;: &quot;Adding missing tests&quot;,</span><br><span class="line">      &quot;emoji&quot;: &quot;💍&quot;,</span><br><span class="line">      &quot;value&quot;: &quot;test&quot;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>这种 commit 不需要额外添加强制校验commit的工具，这个格式因为表情是属于 subject 字段的，所以是符合 angluar 规范的，默认用 angluar 的校验是可以通过的。所以有的人想要表情commit是用 commitizen+git-cz 实现的。</p>
            <h2 id="表情在提交信息最开头显示"><a href="#表情在提交信息最开头显示" class="headerlink" title="表情在提交信息最开头显示"></a>表情在提交信息最开头显示</h2>
            <p>这里，我先介绍一个 commitizen 官网推荐的一个适配器 cz-emoji，但我这个主题不是讲它。它提交的commit信息如下：<img src="" data-original="/images/git/cf4cd1cd4e694d89b5e5dedb46b65067~tplv-k3u1fbpfcp-watermark.image" alt="img"></p>
            <p><a target="_blank" rel="noopener" href="https://github.com/ngryman/cz-emoji">cz-emoji</a>：这个适配器是将type部分替换成emoji了。由于这个比较简单，大家感兴趣去看它的官网说明吧，这里不讨论如何使用这个了。</p>
            <p>好了，这里主要讲如何在 angluar 基础上加入表情，保留type的情况，在type前面加入表情 :emoji:（这个是我自己搞了好半天的😂）。<a target="_blank" rel="noopener" href="https://juejin.cn/post/6934292467160514567?utm_source=gold_browser_extension#heading-5">这个commit规范就是我上面提到的表情开头规范</a></p>
            <p>来吧，先让俺们安装 cz-customizable</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">npm i -D cz-customizable</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>package.json</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">&quot;config&quot;: &#123;</span><br><span class="line">  &quot;commitizen&quot;: &#123;</span><br><span class="line">    &quot;path&quot;: &quot;node_modules&#x2F;cz-customizable&quot;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p><a target="_blank" rel="noopener" href="https://github.com/leoforfree/cz-customizable">cz-customizable</a>：这个是适配器用于自定义 cz 命令的，可以自定义提示信息、types、长度等等。</p>
            <p>在项目根目录下添加 .cz-config.js 添加配置项即可，大家可以参考官网说明配置属于自己项目的提示和规则，我的配置文件如下：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">&#x2F;.cz-config.js</span><br><span class="line"></span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">  types: [</span><br><span class="line">    &#123;</span><br><span class="line">      value: &#39;feat&#39;,</span><br><span class="line">      name: &#39;feat: 新功能&#39;</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      value: &#39;fix&#39;,</span><br><span class="line">      name: &#39;fix: 修复bug&#39;</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      value: &#39;init&#39;,</span><br><span class="line">      name: &#39;init: 初始化&#39;</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      value: &#39;:pencil2: docs&#39;,</span><br><span class="line">      name: &#39;docs: 文档变更&#39;</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      value: &#39;style&#39;,</span><br><span class="line">      name: &#39;style: 代码的样式美化&#39;</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      value: &#39;refactor&#39;,</span><br><span class="line">      name: &#39;refactor: 重构&#39;</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      value: &#39;perf&#39;,</span><br><span class="line">      name: &#39;perf: 性能优化&#39;</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      value: &#39;test&#39;,</span><br><span class="line">      name: &#39;test: 测试&#39;</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      value: &#39;revert&#39;,</span><br><span class="line">      name: &#39;revert: 回退&#39;</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      value: &#39;build&#39;,</span><br><span class="line">      name: &#39;build: 打包&#39;</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      value: &#39;chore&#39;,</span><br><span class="line">      name: &#39;chore: 构建&#x2F;工程依赖&#x2F;工具&#39;</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      value: &#39;ci&#39;,</span><br><span class="line">      name: &#39;ci: CI related changes&#39;</span><br><span class="line">    &#125;</span><br><span class="line">  ],</span><br><span class="line">  messages: &#123;</span><br><span class="line">    type: &#39;请选择提交类型(必填)&#39;,</span><br><span class="line">    customScope: &#39;请输入文件修改范围(可选)&#39;,</span><br><span class="line">    subject: &#39;请简要描述提交(必填)&#39;,</span><br><span class="line">    body: &#39;请输入详细描述(可选)&#39;,</span><br><span class="line">    breaking: &#39;列出任何BREAKING CHANGES(可选)&#39;,</span><br><span class="line">    footer: &#39;请输入要关闭的issue(可选)&#39;,</span><br><span class="line">    confirmCommit: &#39;确定提交此说明吗？&#39;</span><br><span class="line">  &#125;,</span><br><span class="line">  allowCustomScopes: true,</span><br><span class="line">  allowBreakingChanges: [&#39;feat&#39;, &#39;fix&#39;], &#x2F;&#x2F; 当提交类型为feat、fix时才有破坏性修改选项</span><br><span class="line">  subjectLimit: 72</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>现在输入 cz 或 git cz ，效果如下：<img src="" data-original="/images/git/5af833aee4114cb08e226dccd50e4739~tplv-k3u1fbpfcp-watermark.image" alt="img"></p>
            <p>因为，我想要表情开头，所以我用了个取巧的办法将 .cz-config.js 的 types 字段修改为下面这个样子来实现：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">types: [</span><br><span class="line">    &#123;</span><br><span class="line">      value: &#39;:zap: feat&#39;,</span><br><span class="line">      name: &#39;⚡ feat: 新功能&#39;</span><br><span class="line">    &#125;,</span><br><span class="line">    ...</span><br><span class="line">]</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>效果如下，就是加入了表情部分，其它跟上面那个效果一样，就不录gif图了：<img src="" data-original="/images/git/c28b1ed9b7374cd0825ba9f5aca7abde~tplv-k3u1fbpfcp-watermark.image" alt="img"></p>
            <p>将value部分绑定上表情码就会带上表情了，用表情码 :zap: 不用⚡ 是因为之后咱们还需要加入校验commit信息，校验表情的预设只有是表情码能通过校验。咱们自定义这种格式是不符合 angluar 规范的，需要安装其他校验工具。马上就要讲到啦！</p>
            <p>这里的表情都是用的 <a target="_blank" rel="noopener" href="https://gitmoji.dev/">gitmoji</a> 里提供的表情，以及后面强制校验commit信息表情也是校验是否包含在这个里面的表情。这个表情码在命令行中显示的还是表情码，提交到 github 上面后就会显示对应的表情的。如下图：<img src="" data-original="/images/git/4816105eac7d48418e79a9c8f8e8ff8d~tplv-k3u1fbpfcp-watermark.image" alt="img"></p>
            <h2 id="vscode提交代码工具"><a href="#vscode提交代码工具" class="headerlink" title="vscode提交代码工具"></a>vscode提交代码工具</h2>
            <p>可能你懒得敲命令去提交commit，这里推荐两个我个人觉得还可以的vscode提代码的插件，直接在扩展商店里搜了安装就行，用法很简单就不说，大家下载的时候读一下 Usage 就会了。（之后我会自己写一个符合自己commit习惯的vscode插件，到时候推荐给大家）😁</p>
            <p><a target="_blank" rel="noopener" href="https://github.com/KnisterPeter/vscode-commitizen">Visual Studio Code Commitizen Support</a>：这个插件是我一直用习惯了的，它遵循cz-customizable并创建所需的配置文件，如果你的项目根目录有 .cz-config.js 配置，它会根据这个配置文件显示提示和校验规则（需要重启下vscode才会生效）。此插件提交效果如下：<img src="" data-original="/images/git/94319f9e283f46e39e578f8af9b6c938~tplv-k3u1fbpfcp-watermark.image" alt="img"></p>
            <p><a target="_blank" rel="noopener" href="https://github.com/vivaxy/vscode-conventional-commits">Conventional Commits</a>：这个插件可以填表情(选填)，格式是符合 angluar 或 angluar+subject加表情 规范的。此插件提交效果如下：<img src="" data-original="/images/git/433c6c7bc4b8481286a8ee5922070db1~tplv-k3u1fbpfcp-watermark.image" alt="img"></p>
            <h1 id="规范校验"><a href="#规范校验" class="headerlink" title="规范校验"></a>规范校验</h1>
            <p>上面提代码的工具，虽然可以让大家方便的提代码，but！如果你们团队的人就是不遵守规范提代码怎么办呢？是时候请出 husky commitlint 登场啦！他们可以在你commit的时候校验你的commit信息是否是规范的，如果不是就提交不了。</p>
            <p>这部分，也是分为 angluar版和自定义表情版展开，首先，不管说明版本都需要安装这两个工具：</p>
            <p><a target="_blank" rel="noopener" href="https://typicode.github.io/husky/#/">husky</a>：顾名思义，哈士奇，哈哈，咬住你不放。这个工具是用来在git钩子里运行命令有问题咬住你过不去钩子的。一般用来执行eslint、run test、commitlint 相关命令的。</p>
            <p><a target="_blank" rel="noopener" href="https://github.com/conventional-changelog/commitlint">commitlint</a>：这个就没啥好说的了，就是校验你的commit信息的，提供多种共享配置。</p>
            <h2 id="Commit-message-校验"><a href="#Commit-message-校验" class="headerlink" title="Commit message 校验"></a>Commit message 校验</h2>
            <p>首先，下载 husky &amp; commitlint。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">npm i -D husky commitlint</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>新建一个 .commitlintrc.js 或 commitlint.config.js。commitlint会找到这个文件，按文件中指定的 extends 去校验 commit 信息。也可以自定义设置一些<a target="_blank" rel="noopener" href="https://commitlint.js.org/#/reference-rules">规则</a>。</p>
            <blockquote>
              <p>angluar 版</p>
            </blockquote>
            <p>校验 angluar commit规范信息的，内容如下：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">&#x2F;.commitlintrc.js</span><br><span class="line"></span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">  extends: [&#39;@commitlint&#x2F;config-conventional&#39;]</span><br><span class="line">&#125;;</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>@commitlint/config-conventional是按 angluar 规范校验的，大家也可以用其他的，或者自己写一个lint发到npm上。</p>
            <blockquote>
              <p>emoji 开头版</p>
            </blockquote>
            <p>校验我上面提的 emoji 开头的commit规范信息，commitlint 并没有内置合适的共享配置，这种需要自己写一个符合的配置，好在已经有人写过这种可共享配置了，这里我用的网上找到的空谷大佬写好的 <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/commitlint-config-gitmoji">commitlint-config-gitmoji</a>。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">npm i -D commitlint-config-gitmoji</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>内容如下：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">&#x2F;.commitlintrc.js</span><br><span class="line"></span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">  extends: [&#39;gitmoji&#39;]</span><br><span class="line">&#125;;</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>commitlint都设置好了，下面我们要实现提交时强制校验。</p>
            <blockquote>
              <p>husky强制校验commit信息</p>
            </blockquote>
            <p>执行以下命令，会在项目根目录下生成一个.kusky文件夹。（这里默认大家下的husky都是最新的5.0版本）</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">npx husky install</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>在.kusky文件夹内创建commit-msg文件，内容如下：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">#!&#x2F;bin&#x2F;sh</span><br><span class="line"></span><br><span class="line">npx --no-install commitlint --edit &quot;$1&quot;</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>这个时候，我们再提交代码的时候会走到commit-msg这个钩子里，执行我们写好的校验commit的命令，当commit信息不符合规范时，commitlint会提示哪里规则不对，husky会拦住当前commit信息提不上了。就实现了强制遵守定义好的commit规范，不能随便瞎提代码了！！！<img src="" data-original="/images/git/3028fbd2527742acaefa950b14790f33~tplv-k3u1fbpfcp-watermark.image" alt="img"></p>
            <p>下面，我们再聊下在commit之前校验代码和跑测试。</p>
            <h2 id="代码规范校验-amp-跑测试"><a href="#代码规范校验-amp-跑测试" class="headerlink" title="代码规范校验 &amp; 跑测试"></a>代码规范校验 &amp; 跑测试</h2>
            <p>虽然咱们编辑器都有eslint插件自动修复代码，大家一般也都不会提交不符合eslint的代码，但是有的同学可能真的不装这个插件没有自动修复，不看效果盲写代码提交的，所以以防万一都是需要在commit前校验代码规范以及测试的，这样保证你提的代码都是正儿八经的符合规范的并且通过测试的🤣，哈哈哈哈！！！</p>
            <p>首先，咱们需要安装 <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/lint-staged">lint-staged</a>，很多人不用 lint-staged，直接在 pre-commit 钩子里执行 npm run lint，这样有个问题，如果项目大了，你只修改一个文件，但它仍然会校验src下所有文件，就会导致提个代码慢的要死等半天。而 lint-staged 就能解决这个问题，它只会校验你修改的那部分文件。好了，了解前因后果后我们开始吧~</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">npm i -D lint-staged</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>package.json</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">&quot;scripts&quot;: &#123;</span><br><span class="line">  &quot;lint&quot;: &quot;vue-cli-service lint --fix&quot;,</span><br><span class="line">  &quot;test&quot;: &quot;your-cmd&quot; </span><br><span class="line">&#125;,</span><br><span class="line">&quot;lint-staged&quot;: &#123;</span><br><span class="line">  &quot;src&#x2F;**&#x2F;*.scss&quot;: [</span><br><span class="line">    &quot;stylelint --fix&quot;</span><br><span class="line">  ],</span><br><span class="line">  &quot;src&#x2F;**&#x2F;*.&#123;js,vue,ts,tsx&#125;&quot;: &quot;npm run lint&quot;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>在.kusky文件夹内创建pre-commit文件，内容如下：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">#!&#x2F;bin&#x2F;sh</span><br><span class="line"></span><br><span class="line">npx --no-install lint-staged</span><br><span class="line"></span><br><span class="line">npm run test</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>在这里，当你提交代码就会自动校验并修复你的所提交的代码。下面，我们开始讲 CHANGELOG 自动生成。</p>
            <h1 id="CHANGELOG-自动生成"><a href="#CHANGELOG-自动生成" class="headerlink" title="CHANGELOG 自动生成"></a>CHANGELOG 自动生成</h1>
            <p>CHANGELOG 大概的样子长这个样：<img src="" data-original="/images/git/a7642cf16568405a8b4bdf0677a24fd0~tplv-k3u1fbpfcp-watermark.image" alt="img"></p>
            <p>首先，聊一下什么是 CHANGELOG ，为什么需要 CHANGELOG ？它记录你项目所有的commit信息并归类版本，可以快速跳转到该条commit记录，甚至可以显示修改人信息一眼发现bug的创建者😂。它能让你方便知道项目里哪个版本做了哪些功能有哪些bug等信息。也方便排查bug，对于提交记录一目了然，不用一个一个去翻去查。</p>
            <p>这里，就直接用 standard-version 来实现自动生成 CHANGELOG 了。 conventional-changelog 咱们就不聊了，毕竟是它推荐咱们用 standard-version （这都是同一个团队的东西，基于conventional-changelog实现的）。关于为什么推荐 standard-version，大家自行阅读官方解释吧！ <a target="_blank" rel="noopener" href="https://github.com/conventional-changelog/conventional-changelog">官方地址</a>给大家。</p>
            <p>semantic-release 也不聊了，因为 CI/CD 我没咋研究过，没法聊😂！<a target="_blank" rel="noopener" href="https://github.com/semantic-release/semantic-release">官方地址</a>在此，还有<a target="_blank" rel="noopener" href="https://www.yuque.com/arvinxx-fe/workflow/e25c3948-dbae-4fc2-94af-661e883a2ef5">一篇推荐文章</a>大家有兴趣的可以读读。</p>
            <p>好了，我们开始用 standard-version 来实现吧！先来下载~</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">npm i -D standard-version</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>package.json</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">&#123;</span><br><span class="line">  &quot;scripts&quot;: &#123;</span><br><span class="line">    &quot;release&quot;: &quot;standard-version&quot;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>执行以下命令，就会根据你的commit信息自动生成 CHANGELOG.md 文件。</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">npm run release</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>当你的commit type是 feat和fix的时候执行这个命令，它会自增版本号。</p>
            <p>这里说个我调试中发现的小问题，在你执行过一次后如果你删掉了 CHANGELOG.md 文件，并且没有再修改提交，再重新去执行生成命令，它会给你生成只有一个版本号信息的文件，你必须提交一下再执行才会有commit日志，但在这个提交之前的那些记录不会再显示（很奇怪，调试的时候注意下这个问题）。</p>
            <p><a target="_blank" rel="noopener" href="https://github.com/conventional-changelog/standard-version">standard-version</a> 提供自定义配置不同类型对应显示文案，在根目录新建 versionrc.js 文件，这里我示例一个我的 versionrc.js 内容：</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">  &quot;types&quot;: [</span><br><span class="line">    &#123; &quot;type&quot;: &quot;feat&quot;, &quot;section&quot;: &quot;✨ Features | 新功能&quot; &#125;,</span><br><span class="line">    &#123; &quot;type&quot;: &quot;fix&quot;, &quot;section&quot;: &quot;🐛 Bug Fixes | Bug 修复&quot; &#125;,</span><br><span class="line">    &#123; &quot;type&quot;: &quot;init&quot;, &quot;section&quot;: &quot;🎉 Init | 初始化&quot; &#125;,</span><br><span class="line">    &#123; &quot;type&quot;: &quot;docs&quot;, &quot;section&quot;: &quot;✏️ Documentation | 文档&quot; &#125;,</span><br><span class="line">    &#123; &quot;type&quot;: &quot;style&quot;, &quot;section&quot;: &quot;💄 Styles | 风格&quot; &#125;,</span><br><span class="line">    &#123; &quot;type&quot;: &quot;refactor&quot;, &quot;section&quot;: &quot;♻️ Code Refactoring | 代码重构&quot; &#125;,</span><br><span class="line">    &#123; &quot;type&quot;: &quot;perf&quot;, &quot;section&quot;: &quot;⚡ Performance Improvements | 性能优化&quot; &#125;,</span><br><span class="line">    &#123; &quot;type&quot;: &quot;test&quot;, &quot;section&quot;: &quot;✅ Tests | 测试&quot; &#125;,</span><br><span class="line">    &#123; &quot;type&quot;: &quot;revert&quot;, &quot;section&quot;: &quot;⏪ Revert | 回退&quot; &#125;,</span><br><span class="line">    &#123; &quot;type&quot;: &quot;build&quot;, &quot;section&quot;: &quot;📦‍ Build System | 打包构建&quot; &#125;,</span><br><span class="line">    &#123; &quot;type&quot;: &quot;chore&quot;, &quot;section&quot;: &quot;🚀 Chore | 构建&#x2F;工程依赖&#x2F;工具&quot; &#125;,</span><br><span class="line">    &#123; &quot;type&quot;: &quot;ci&quot;, &quot;section&quot;: &quot;👷 Continuous Integration | CI 配置&quot; &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>配置之后，我的 CHANGELOG 就长这个样子啦！<img src="" data-original="/images/git/f7c66497e1244d18a12ae72d6e6e7adf~tplv-k3u1fbpfcp-watermark.image" alt="img"></p>
            <p>这里得提一下， standard-version 默认的预设是 angular ，像咱们之前自定义表情那种commmit，规范和angular不一样，它读不到对应的type生成的更改日志是没法分类的，上面写 commitlint-config-gitmoji 工具的大哥已经写了根据 :emoji: type: … 格式生成 CHANGELOG 的工具<a target="_blank" rel="noopener" href="https://www.npmjs.com/package/conventional-changelog-gitmoji-config">conventional-changelog-gitmoji-config</a>了，这里咱们就直接用吧！不过这个工具并没有提供自定义配置类型文案的功能，在源码里写死了，所以用了这个工具不能像上面那样 versionrc.js 自定义了，不过它自带的也挺好看的，可以设置显示表情，还支持中英文两种，还支持显示修改人和邮箱，也是很强大的！！！🉑</p>
            <p>来，咱们下载先~</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">npm i -D conventional-changelog-gitmoji-config</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>standard-version 通过 –preset 命令另外指定预设（源码内发现）</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">&#123;</span><br><span class="line">  &quot;scripts&quot;: &#123;</span><br><span class="line">    &quot;release&quot;: &quot;standard-version --preset gitmoji-config&quot;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>这里解释一下，为什么 –preset gitmoji-config 就可以读到预设，这个包明明叫 conventional-changelog-gitmoji-config 啊，这是因为 conventional-changelog-preset-loader找预设时找的是 conventional-changelog-xxx，前缀是写死的 conventional-changelog-，源码截图在此：<img src="" data-original="/images/git/6bec5f37f39c458ea358093c1e3c7bcf~tplv-k3u1fbpfcp-watermark.image" alt="img"></p>
            <p>CI/CD没搞过，也没用上 standard-version，为了方便我就直接在 pre-push 钩子里执行生成 CHANGELOG 的命令了哈~</p>
            <p>.husky/pre-push</p>
            <figure class="highlight plain">
              <table>
                <tr>
                  <td class="gutter">
                    <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre>
                  </td>
                  <td class="code">
                    <pre><span class="line">#!&#x2F;bin&#x2F;sh</span><br><span class="line"></span><br><span class="line">npm run release</span><br><span class="line"></span><br></pre>
                  </td>
                </tr>
              </table>
            </figure>

            <p>这样，当我执行 git push 的时候，就会自动生成 CHANGELOG.md 一并提交到远端了，就不用手动执行 npm run release 命令再push了。啦啦啦🎈🎈🎈</p>
            <p>终于结束啦！感谢大家听我啰嗦了这么久，希望可以帮到大家，如果文章中有错漏之处还望指正。谢谢大家啦！！！😜</p>
            <h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h1>
            <p><a target="_blank" rel="noopener" href="https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines">Angular官方comit规范说明</a></p>
            <p><a target="_blank" rel="noopener" href="https://www.yuque.com/arvinxx-fe/workflow/e25c3948-dbae-4fc2-94af-661e883a2ef5">百度到的素不相识空谷先生的语雀文章</a></p>
            <p><a target="_blank" rel="noopener" href="https://juejin.cn/post/6844903606815064077#heading-6">优雅的提交你的 Git Commit Message</a></p>
            <p><a target="_blank" rel="noopener" href="https://lyxdream.github.io/">朋友的博客</a></p>
            <p>以及文中各个工具的文档和源码，就不一一罗列了</p>

          </div>





          <footer class="post-footer">
            <div class="post-tags">
              <a href="/tags/Git/" rel="tag"># Git</a>
              <a href="/tags/commit%E8%A7%84%E8%8C%83/" rel="tag"># commit规范</a>
              <a href="/tags/Angular/" rel="tag"># Angular</a>
            </div>



            <div class="post-nav">
              <div class="post-nav-item">
                <a href="/blob/2021-02-08-using-js-to-generate-uuid-in-browser/" rel="prev" title="在浏览器中使用js生成UUID">
                  <i class="fa fa-chevron-left"></i> 在浏览器中使用js生成UUID
                </a>
              </div>
              <div class="post-nav-item">
                <a href="/blob/2021-03-10-using-js-to-set-pseudo-element-style/" rel="next" title="使用 js 设置伪元素样式">
                  使用 js 设置伪元素样式 <i class="fa fa-chevron-right"></i>
                </a>
              </div>
            </div>
          </footer>
        </article>
      </div>







      <script>
        window.addEventListener('tabs:register', () => {
          let {
            activeClass
          } = CONFIG.comments;
          if (CONFIG.comments.storage) {
            activeClass = localStorage.getItem('comments_active') || activeClass;
          }
          if (activeClass) {
            const activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
            if (activeTab) {
              activeTab.click();
            }
          }
        });
        if (CONFIG.comments.storage) {
          window.addEventListener('tabs:click', event => {
            if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
            const commentClass = event.target.classList[1];
            localStorage.setItem('comments_active', commentClass);
          });
        }
      </script>
    </div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


      <div class="copyright">
        &copy;
        <span itemprop="copyrightYear">2021</span>
        <span class="with-love">
          <i class="fa fa-heart"></i>
        </span>
        <span class="author" itemprop="copyrightHolder">holidaypenguin</span>
      </div>
      <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/mist/" class="theme-link" rel="noopener" target="_blank">NexT.Mist</a> 强力驱动
      </div>

    </div>
  </footer>


  <script size="300" alpha="0.1" zIndex="-1" src="https://cdn.jsdelivr.net/npm/ribbon.js@1.0.2/dist/ribbon.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
  <script src="/js/love.js"></script>

  <script src="/js/development.js"></script>
  <script src="/js/utils.js"></script>
  <script src="/js/motion.js"></script>
  <script src="/js/schemes/muse.js"></script>
  <script src="/js/next-boot.js"></script>


  <script src="/js/local-search.js"></script>









  <script>
    (function() {
      function leancloudSelector(url) {
        url = encodeURI(url);
        return document.getElementById(url).querySelector('.leancloud-visitors-count');
      }

      function addCount(Counter) {
        const visitors = document.querySelector('.leancloud_visitors');
        const url = decodeURI(visitors.id);
        const title = visitors.dataset.flagTitle;

        Counter('get', '/classes/Counter?where=' + encodeURIComponent(JSON.stringify({
            url
          })))
          .then(response => response.json())
          .then(({
            results
          }) => {
            if (results.length > 0) {
              const counter = results[0];
              leancloudSelector(url).innerText = counter.time + 1;
              Counter('put', '/classes/Counter/' + counter.objectId, {
                  time: {
                    '__op': 'Increment',
                    'amount': 1
                  }
                })
                .catch(error => {
                  console.error('Failed to save visitor count', error);
                });
            } else {
              Counter('post', '/classes/Counter', {
                  title,
                  url,
                  time: 1
                })
                .then(response => response.json())
                .then(() => {
                  leancloudSelector(url).innerText = 1;
                })
                .catch(error => {
                  console.error('Failed to create', error);
                });
            }
          })
          .catch(error => {
            console.error('LeanCloud Counter Error', error);
          });
      }

      function showTime(Counter) {
        const visitors = document.querySelectorAll('.leancloud_visitors');
        const entries = [...visitors].map(element => {
          return decodeURI(element.id);
        });

        Counter('get', '/classes/Counter?where=' + encodeURIComponent(JSON.stringify({
            url: {
              '$in': entries
            }
          })))
          .then(response => response.json())
          .then(({
            results
          }) => {
            for (let url of entries) {
              const target = results.find(item => item.url === url);
              leancloudSelector(url).innerText = target ? target.time : 0;
            }
          })
          .catch(error => {
            console.error('LeanCloud Counter Error', error);
          });
      }

      const {
        app_id,
        app_key,
        server_url
      } = {
        "enable": true,
        "app_id": "povuqNsSqFodlakVIwtEX5kb-gzGzoHsz",
        "app_key": "zXD40RDtDB3DMtpC89k0AK7g",
        "server_url": null,
        "security": false
      };

      function fetchData(api_server) {
        const Counter = (method, url, data) => {
          return fetch(`${api_server}/1.1${url}`, {
            method,
            headers: {
              'X-LC-Id': app_id,
              'X-LC-Key': app_key,
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
          });
        };
        if (CONFIG.page.isPost) {
          if (CONFIG.hostname !== location.hostname) return;
          addCount(Counter);
        } else if (document.querySelectorAll('.post-title-link').length >= 1) {
          showTime(Counter);
        }
      }

      const api_server = app_id.slice(-9) === '-MdYXbMMI' ? `https://${app_id.slice(0, 8).toLowerCase()}.api.lncldglobal.com` : server_url;

      if (api_server) {
        fetchData(api_server);
      } else {
        fetch('https://app-router.leancloud.cn/2/route?appId=' + app_id)
          .then(response => response.json())
          .then(({
            api_server
          }) => {
            fetchData('https://' + api_server);
          });
      }
    })();
  </script>



<script>
            window.imageLazyLoadSetting = {
                isSPA: false,
                preloadRatio: 1,
                processImages: null,
            };
        </script><script>window.addEventListener("load",function(){var t=/\.(gif|jpg|jpeg|tiff|png)$/i,r=/^data:image\/[a-z]+;base64,/;Array.prototype.slice.call(document.querySelectorAll("img[data-original]")).forEach(function(a){var e=a.parentNode;"A"===e.tagName&&(e.href.match(t)||e.href.match(r))&&(e.href=a.dataset.original)})});</script><script>!function(n){n.imageLazyLoadSetting.processImages=o;var e=n.imageLazyLoadSetting.isSPA,i=n.imageLazyLoadSetting.preloadRatio||1,r=Array.prototype.slice.call(document.querySelectorAll("img[data-original]"));function o(){e&&(r=Array.prototype.slice.call(document.querySelectorAll("img[data-original]")));for(var t,a=0;a<r.length;a++)0<=(t=(t=r[a]).getBoundingClientRect()).bottom&&0<=t.left&&t.top<=(n.innerHeight*i||document.documentElement.clientHeight*i)&&function(){var t,e,n,i,o=r[a];t=o,e=function(){r=r.filter(function(t){return o!==t})},n=new Image,i=t.getAttribute("data-original"),n.onload=function(){t.src=i,e&&e()},t.src!==i&&(n.src=i)}()}o(),n.addEventListener("scroll",function(){var t,e;t=o,e=n,clearTimeout(t.tId),t.tId=setTimeout(function(){t.call(e)},500)})}(this);</script></body>

</html>